<template>
  <div id="app" :class="{ active: currentPlaySongId }">
    <Header v-if="$route.meta.showNav" />
    <!-- <h1>app</h1> -->
    <ul id="nav" v-if="$route.meta.showNav">
      <li><router-link to="/">推荐音乐</router-link></li>
      <li><router-link to="/rank">排行榜</router-link></li>
      <li><router-link to="/search">搜索</router-link></li>
    </ul>
    <!-- <KeepAlive> -->
    <router-view
      @update:current-play-song="currentPlaySong = $event"
      :currentPlaySongId="currentPlaySongId"
      :playing="playing"
      @update:gedan="gedan = $event"
    />
    <!-- </KeepAlive> -->

    <Play
      :currentPlaySong="currentPlaySong"
      :currentPlaySongId="currentPlaySongId"
      @update:playing="playing = $event"
      :playing="playing"
      :gedan="gedan"
      @update:current-play-song="currentPlaySong = $event"
    ></Play>
  </div>
</template>
<script>
import Play from "@/components/Play.vue";
import Header from "@/components/Header.vue";

export default {
  components: {
    Play,
    Header,
  },
  data: function () {
    return {
      currentPlaySong: null,
      playing: false,
      gedan: [],
    };
  },
  computed: {
    currentPlaySongId: function () {
      if (!this.currentPlaySong) return "";
      return this.currentPlaySong.id;
    },
  },
};
</script>

<style lang="less">
@import "./assets/var.less";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
  &.active {
    padding-bottom: 50px;
  }
}

#nav {
  height: 40px;
  display: flex;
  // background-color: red;
  border-bottom: 2px solid rgb(230, 230, 230);
  li {
    flex: 1;
    text-align: center;
    a {
      text-decoration: none;
      line-height: 38px;
      color: #2c3e50;
      display: inline-block;
      border-bottom: 2px solid transparent;

      &.router-link-exact-active {
        color: @red;
        border-bottom: 2px solid @red;
      }
    }
  }
}
</style>
